<template>
	<div class="aside">
		<el-menu :default-active="pathName" @open="handleOpen" @close="handleClose" background-color="#545c64"
			text-color="#fff" active-text-color="#ffaa00">
			<div v-for="(item,index) in menu" :key="index">
				<el-submenu :index="item.id" v-if="item.children">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>{{item.name}}</span>
					</template>
					<div v-for="(elem,idx) in item.children" :key="idx">
						<el-submenu :index="elem.id" v-if="elem.children">
							<template slot="title">{{elem.name}}</template>
							<div v-for="coulmn in elem.children" :key="coulmn.id">
								<el-menu-item :index="coulmn.id" @click="jump(coulmn.id)">{{coulmn.name}}</el-menu-item>
							</div>
						</el-submenu>
						<el-menu-item v-else :index="elem.id" @click="jump(elem.id)">{{elem.name}}</el-menu-item>
					</div>
				</el-submenu>
				<el-menu-item :index="item.id" v-else @click="jump(item.id)">
					<i class="el-icon-menu"></i>
					<span slot="title">{{item.name}}</span>
				</el-menu-item>
			</div>
		</el-menu>
	</div>
</template>

<script>
	import {
		nanoid
	} from 'nanoid'
	export default {
		data() {
			return {
				pathName: '',
				menu: [{
						id: '/index',
						name: '首页',
					},
					{
						id: nanoid(),
						name: '教师管理',
						children: [{
								id: '/peixun',
								name: '培训管理',
							}, {
								id: '/baoming',
								name: '报名管理',
							},
							{
								id: '/qiandao',
								name: '签到管理',
							}, {
								id: '/jifen',
								name: '积分管理',
							}
						]
					},
					{
						id: nanoid(),
						name: '设备管理',
						children: [{
							name: '电脑管理',
							id: '/diannao'
						}, {
							id: nanoid(),
							name: '教室管理',
							children: [{
									name: '101教室',
									id: '/101'
								},
								{
									name: '102教室',
									id: '/102'
								}
							]
						}]
					}
				]
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			jump(path) {
				this.$router.push(path)
			}
		},
		mounted() {

			this.pathName = location.pathname;
			console.log(this.pathName)
		}
	}
</script>

<style lang="scss" scoped>
	.aside {
		width: 100%;
		height: 100%;
		background-color: #545c64;

		.el-menu {
			border: none !important;
		}
	}
</style>
